<template>
  <div>
 
    </el-button>
       <el-dropdown trigger="click"  placement="bottom">
            <span class="el-dropdown-link">
         <el-button
      @click="drawer = true"
      style="margin-left: 16px"
      icon="el-icon-plus"
    ></el-button>
      </span>
     <el-dropdown-menu slot="dropdown">

    <el-form ref="form" :model="form" class="flag" label-width="80px">
        <span style="margin-left:15px;font:18px large;display:block">显示的列</span>
         <el-input
         size="small"
        placeholder="搜索"
        suffix-icon="el-icon-search"
        v-model="form.searchContent"
        style="width: 240px; border-radius: 30px; margin-top: 20px;  margin-left: 10px;"
      >
      </el-input>

      <!-- <span style="float:right;margin-right:20px" class="el-icon-close" ></span> -->
    <!-- <el-checkbox-group    
        v-model="form.checkedCities"
        @change="handleCheckedCitiesChange"
      > -->
        <div class="item">
          <el-checkbox
            style="
              margin: 0px;
              height: 20px;
              padding: 10px;
              border-bottom: 1px solid #eff8ff;
            "
            v-for="item in items"
            :label="item.label"
            :key="item.rank_index"
            v-model="checkedArr[item.key]"
            ></el-checkbox
          >
        </div>
      <!-- </el-checkbox-group> -->
        <div class="toolBottom">
          <div v-for="item in btn">
        <el-button 
        style="border-radius: 30px;margin-right:10px" 
        :type="item.style=='blue'?'primary':'none'" 
        @click="item.api_method=='post'?submitForm(item):close(item)"
       > 
        {{item.label}} 
        </el-button>
          </div>
        </div>
    </el-form>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- <el-drawer
      class="drawer"
      :modal="false"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
    <el-form ref="form" :model="form" label-width="80px">
      <el-input
        placeholder="搜索"
        suffix-icon="el-icon-search"
        v-model="form.searchContent"
        style="width: 240px; border-radius: 30px; margin-top: 40px"
      >
      </el-input>
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="form.checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <div class="item">
          <el-checkbox
            style="
              margin: 0px;
              height: 20px;
              padding: 10px;
              border-bottom: 1px solid #eff8ff;
            "
            v-for="city in cities"
            :label="city"
            :key="city.rank_index"
            >{{ city.label }}</el-checkbox
          >
        </div>
      </el-checkbox-group>
      <div class="toolBottom">
          <div v-for="item in btn">
        <el-button style="border-radius: 30px" type="primary" @click="submitForm"> {{item.label}} </el-button>
          </div>
      </div>
    </el-form>
    </el-drawer> -->
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";
import { getDrop, getDropChecked, ComSubmitForm } from "../api/testApi";
export default {
  data() {
    return {
      drawer: false,

      query: {
        _id: "5fdac51570a56dffacfd8fbb",

        company_id: "abc",

        app_id: "abc",

        modul_id: "bbc",

        role_id: "222",

        layout_id: "888888",
      },

      itemList: "",
      checkAll: false,
      checkedItems: [],
      items: "",
      isIndeterminate: true,
      searchContent: "", //drawer顶部的搜索框所绑定的内容
      form: {},
      btn: {},
      checkedArr: "",
    };
  },
  methods: {
    //   选择

    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.items.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.items.length;
    },
    // 画图接口
    test() {
      getDrop(this.query).then((response) => {
        this.items = response.data.data.fields;
        this.btn = response.data.data.actions;
        console.log(this.btn);
      });
    },
    //获取checked的item
    getChecked() {
      getDropChecked(this.query).then((response) => {
        this.checkedArr = response.data.data.fields[0];
      });
    },
    submitForm(item) {
      let requestData = qs.stringify({
        postData: JSON.stringify(this.checkedArr),
      });
      ComSubmitForm(item.api_path, requestData).then((response) => {
        console.log(response);
      });
    },
    close() {
      console.log("close");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    cancleSubmit() {
      this.drawer = false;
    },
  },

  mounted() {
    this.test();
    this.getChecked();
  },
};
</script>

<style  scoped>
.item {
  display: flex;
  flex-direction: column;
  margin: 0px;
  height: 350px;
  min-width: 250px;
  overflow-y: scroll;
  margin-left: 10px;
}
.drawer {
  margin-top: 10%;
  height: 60%;
}
.toolBottom {
  display: flex;
  margin-left: 10px;
  margin-top: 20px;
}
</style>

<style>

.flag input.el-input__inner {
    border-radius:30px;
}
/* .el-drawer {
  height: 200px;
}



.el-drawer__body {
  height: 100px !important;
}
.el-drawer__body {
  height: 500px;
}
#el-drawer__title {
  display: none;
}*/
.el-input__inner {
  border-radius: 30px;
}
.el-drawer__header {
  display: none;
}
.el-drawer__container {
  position: absolute;
  left: 400px;
  width: 1000px;
  height: 600px;
}
.el-drawer__wrapper {
  width: 2000px;
  border: none !important;
}
.el-icon-close:hover {
  color: #409eff;
}
</style>
